<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div style="margin-top: 30px">

          <h2 class="el-icon-watch" style="text-align: center"> {{dateFormat(date)}} </h2>
          <div style="margin-top: 40px">
            <h2 class="el-icon-s-custom"></h2> <el-button type="success" @click="SignIn">进行签到</el-button>
          </div>

          <div style="margin-top: 40px">
            <h2 class="el-icon-s-home"></h2><el-button type="danger" @click="SignOut">进行签退</el-button>
          </div>


        </div>
      </el-col>
      <el-col :span="10" offset="2">
        <div style="margin-top: 30px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今日签到情况</span>
            </div>
            <div>
              签到时间：{{this.in_time|dateAllTime}}
            </div>
          </el-card>
           <el-card class="box-card" style="margin-top: 40px">
            <div slot="header" class="clearfix">
              <span>今日签退情况</span>
            </div>
            <div>
              签退时间：{{this.out_time|dateAllTime}}
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'SignInView',
    data () {
      return {
        date: new Date(), //当前时间显示到前端页面
        in_time:'未签到',
        out_time:'未签退'
      }
    },
    methods: {
      dateFormat (time) {
        var date = new Date(time)
        var year = date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
        * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        * */
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        // 拼接
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      },
      show_sign (time) {
        var date = new Date(time)
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        // 拼接
        return hours + '时' + minutes + '分' + seconds + '秒'
      },

      SignIn () {
        //签到
        this.$axios({
          url: this.$settings.base_url + '/user/staffsignin/',
          method: 'get',
          params: {
            'sign': 1,
            'currunt': this.dateFormat(this.date)
          }
        }).then(res => {
          if (res.data.code === 100) {
            let sing_time = this.date
            let show = '签到时间：' + this.show_sign(sing_time)
            this.$message.success(show)
            this.get_sign()
          } else {
            this.$message.warning('已经签到过了，无法再签到！！')
          }
        })

      },
      SignOut () {
        //签退
        this.$axios({
          url: this.$settings.base_url + '/user/staffsignin/',
          method: 'get',
          params: {
            'sign': 0,
            'currunt': this.dateFormat(this.date)
          }
        }).then(res => {
          if (res.data.code === 100) {
            let sing_time = this.date
            let show = '签退时间：' + this.show_sign(sing_time)
            this.$message.success(show)
            this.get_sign()
          } else if (res.data.code === 400) {
            this.$message.error('未到签退时间，无法签退!!!')
          } else {
            this.$message.warning('已经签退,但您今天未签到。')
            this.get_sign()
          }
        })
      },
      //签到显示员工是否签到或签退
      get_sign(){
        this.$axios({
          url:this.$settings.base_url+'/user/staffsignin/',
          method:'post',
        }).then(res=>{

          if(res.data.data.in_time!==0){
            this.in_time = res.data.data.in_time
          }
          if(res.data.data.out_time!==0){
            this.out_time = res.data.data.out_time
          }

        })

      }




    },
    mounted () {
      //显示当前日期时间
      let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.date = new Date() // 修改数据date
      }, 1000)

      this.get_sign()
    },


    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      }


    },
    //查找员工今天是否签到签退

  }
</script>

<style scoped>

</style>
